import React,{useState} from "react";
// import {Link} from 'react-router-dom'
import {NavLink, useLocation} from "react-router-dom";
import {DownOutlined, UserOutlined} from '@ant-design/icons';
import {Col, Row, Input, Button, Dropdown, Menu,Modal} from 'antd';
import HeadItem from "../headItem";
import {GetUserInfo} from "../../service/article";
import './index.scss'
const {Search} = Input;
export default function Header(prop: any) {
    const location = useLocation()
    const state= location.state;
    console.log(state)

    interface NavInfo {
        title: string,
        path: string
    }
    let navList: NavInfo[] = [
        {
            title: "首页",
            path: "/"
        },
        {
            title: "沸点",
            path: "/pins"
        }, {
            title: "课程",
            path: "/course"
        },
        {
            title: "直播",
            path: "123"
        },
        {
            title: "活动",
            path: "/123"
        },
        {
            title: "商城",
            path: "/123"
        },
        {
            title: "APP",
            path: "/123"
        },
        {
            title: "插件",
            path: "/123"
        }
    ]
    const menu = (
        <Menu
            items={[
                {
                    label: '写文章',
                    key: '1',
                    icon: <UserOutlined/>,
                },
                {
                    label: '发沸点',
                    key: '2',
                    icon: <UserOutlined/>,
                },
                {
                    label: '写代码',
                    key: '3',
                    icon: <UserOutlined/>,
                },
            ]}
        />
    );
    const [visible, setVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [Account,setAccount]=useState()
    const [Password,setPassword]=useState()
    const showModal = () => {
        setVisible(true);
    };
    const handleOk = () => {
        console.log(Password)
        GetUserInfo({
            name:Account,
            pw:Password
        }).then((res:any)=>{
            if(res.code===2000){
                sessionStorage.setItem("token",res.data.token)
                setVisible(false);
            }
        })
    };

    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    };
    return (
        <div style={{backgroundColor:"white"}}>
            <div style={{borderBottom: "1px solid rgba(0,0,0,0.2)"}}>
                <Row>
                    {/*左边*/}
                    <Col span={10} offset={3}>
                        <div style={{display: "flex"}}>
                            <div style={{display: "flex", alignItems: "center"}}>
                                <img
                                    src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
                                    alt="稀土掘金"/>
                            </div>
                            <div style={{display: "flex", alignItems: "center"}}>
                                {
                                    navList.map(item => {
                                        return <NavLink to={item.path} key={item.title} state={{page:item.title}}
                                                        className={({isActive}) => isActive ? "headActive headItem" : "headItem"}>{item.title}</NavLink>
                                    })
                                }
                            </div>
                        </div>
                    </Col>
                    {/*    右边*/}
                    <Col span={10} style={{display: "flex", alignItems: "center"}}>
                        <Search placeholder="搜索稀土掘金" enterButton style={{width: 450}} size="large"/>
                        <div style={{marginLeft: "20px"}}>
                            <Dropdown.Button overlay={menu} size="large" type="primary" icon={<DownOutlined/>}>
                                Dropdown
                            </Dropdown.Button>
                        </div>
                        <div style={{display: "flex", alignItems: "center"}}>
                            <img
                                src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/24127194d5b158d7eaf8f09a256c5d01.svg"
                                alt="" style={{margin: "0 15px"}}/>
                            <span>会员</span>
                        </div>
                        <Button size="large" style={{marginLeft: "20px"}} onClick={showModal}>登录</Button>
                    </Col>
                </Row>
            </div>
        {/*    登录弹出框*/}
            <Modal
                title="Title"
                visible={visible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                destroyOnClose={true}
            >
                <Input placeholder="账号" style={{marginBottom:"10px"}} onChange={(e)=>{account(e)}}/>
                <Input placeholder="密码" onChange={(e)=>{password(e)}}/>
            </Modal>
        </div>
    )
    function account(e:any){
        console.log(e.target.value)
        setAccount(e.target.value)
    }
    function password(e:any){
        setPassword(e.target.value)
    }

}

